<template>
    <button class="result" v-if="show" @click="ifshow1">查看拓扑排序结果</button>
    <button class="edit" v-else @click="ifshow2">返回编辑界面</button>
    <ul class="result-main">
        <ResultItem v-for="allSort in allSorts" :key="allSort.id" :allSort="allSort"></ResultItem>
    </ul>
    <p>得到的拓扑序列为{{ result_length }}个，系统已为你展示{{ allSorts.length }}个，点击导出文件即可导出</p>
</template>

<script>
import bus from '@/utils/bus';
import { ref } from 'vue';
import ResultItem from './ResultItem.vue';

export default {
    name: 'SortResult',
    components: { ResultItem },
    props: ['points', 'sides', 'allSorts', 'result_length'],
    setup(props) {
        const show = ref(true);
        let graph = {};

        function newdata() {
            let point_arrays = [];
            props.points.forEach(point => {
                point_arrays.unshift(point.title)
            })

            let side_arrays = Array.from({ length: props.points.length }, () => Array.from({ length: props.points.length }).fill(''));
            let new_side_arrays = [];
            props.sides.forEach(side => {
                const regex = /<([^,]+),([^>]+)>/g;
                const matches = regex.exec(side.title);
                const start = matches[1];
                const end = matches[2];
                for (let i = 0; i < point_arrays.length; i++) {
                    for (let j = 0; j < point_arrays.length; j++) {
                        if (start === point_arrays[i] && end === point_arrays[j]) {
                            side_arrays[i][j] = end;
                        }
                    }
                    let newvalue = [];
                    for (let k = 0; k < point_arrays.length; k++) {
                        if (side_arrays[i][k] !== '') {
                            newvalue.push(side_arrays[i][k]);
                        }
                    }
                    new_side_arrays[i] = newvalue;
                }
            })

            for (let i = 0; i < point_arrays.length; i++) {
                graph[point_arrays[i]] = new_side_arrays[i];
            }
        }

        //环检测
        /*function isloop() {
            let exampoints = [];
            props.points.forEach(point => {
                exampoints.push(point)
            })
            const first_length = exampoints.length;
            let count = 0;
            while (count !== first_length) {
                let uncount = 0;
                for (let i = 0; i < exampoints.length; i++) {
                    if (exampoints[i].indegree === 0) {
                        count++;
                        uncount++;
                        for (let j = 0; j < exampoints.length; j++) {
                            for (let k = 0; k < exampoints[j].linkpoint.length; k++) {
                                if (exampoints[j].linkpoint[k] === exampoints[i].title) {
                                    exampoints[j].linkpoint.splice(k, 1);
                                    exampoints[j].indegree--;
                                }
                            }
                        }
                        exampoints.splice(i, 1);
                    }
                }
                if (count !== first_length && uncount === 0) {
                    return true;
                }
                if (count === first_length) {
                    return false;
                }
            }
        }*/

        //控制不同按钮的显示
        function ifshow1() {
            /*if (isloop() === true) {
                return alert('图中存在环')
            }*/
            newdata();
            bus.emit('delete_result', graph);
            graph = {};
            if (props.sides.length === 0) {
                alert('请至少输入一条边，因为没有边的图的拓扑序列为点的排列组合')
                return
            }
            else {
                show.value = !show.value;
                bus.emit('changeclass');
            }
        }

        function ifshow2() {
            show.value = !show.value;
            bus.emit('changeclass');
        }

        return {
            show,
            ifshow1,
            ifshow2
        }
    }
}
</script>
<style scoped>
button {
    position: absolute;
    top: 3%;
    width: 8rem;
    height: 2rem;
    color: #fff;
    background: linear-gradient(to right, #ff8418, #fa5d0e);
    border: 1px solid #ddd;
    border-radius: .3125rem;
    cursor: pointer;
}

.result {
    left: 5%;
}

.edit {
    right: 5%;
}

.result-main {
    box-sizing: border-box;
    height: 80%;
    margin-left: 0;
    margin-top: 4rem;
    border: 1px solid #ddd;
    border-radius: 0.125rem;
    padding: 0;
    overflow: auto;
    background-color: #fff;
}

p {
    box-sizing: border-box;
    height: 10%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>